<template>
  <!-- 房屋大数据全域核查各区情况 -->
  <base-paenl class="grid-information-dialog" id="globalCheckDialog">
    <div
      slot="header"
      class="header-title"
      @mousedown="mouseDownLeft($event, 'globalCheckDialog', 100, 600)"
    >
      房屋大数据全域核查各区情况
    </div>
    <div slot="main" class="slot-main">
      <div class="dialog-content-second">
        <img
          src="../../assets/images/dialogs/tanchuangcibiaotixiaosanjiao.png"
          width="9px"
          height="12px"
          style="margin: 0 10px"
        />各区完成情况
      </div>
      <div
        v-for="(item, index) of globalCheckData"
        :key="index"
        class="region-row"
      >
        <div
          :class="
            index == 0
              ? 'region-index region-index1'
              : index == 1
              ? 'region-index region-index2'
              : index == 2
              ? 'region-index region-index3'
              : 'region-index'
          "
        >
          {{ index + 1 }}
        </div>
        <div class="region-name">{{ item.areaName }}</div>
        <div class="region-content">
          <div class="region-content-text">
            已核查量：<font class="region-content-value">{{ item.yhcl }}</font
            >幢 待核查量：<font class="region-content-value">{{
              item.dhcl
            }}</font
            >幢 日平均完成量：<font class="region-content-value">{{
              item.rpjwcl
            }}</font
            >幢
          </div>
          <el-progress
            :percentage="item.wcbfb"
            class="region-content-progress"
          ></el-progress>
        </div>
      </div>
    </div>
  </base-paenl>
</template>

<script lang="ts">
import { Vue, Component, Watch } from "vue-property-decorator";
import { mouseDownLeft } from "@/assets/modules/utils";
import BasePaenl from "./CBase.vue";

@Component({
  name: "floorSite",
  components: {
    BasePaenl
  }
})
export default class extends Vue {
  get globalCheckData() {
    return this.$store.getters["panelData/globalCheckData"];
  }
  mounted() {}
  mouseDownLeft(event: any, id: string, sTop: number, sRight: number) {
    mouseDownLeft(event, id, sTop, sRight);
  }
}
</script>

<style lang="scss" scoped>
.grid-information-dialog {
  width: 505px;
  height: 402px;
  background-image: url(../../assets/images/dialogs/tanchuangbeijingkuang-2.png);
  background-size: 100% 100%;
}
.region-row {
  // width: 474px;
  height: 40px;
  margin-bottom: 10px;
  display: flex;
  justify-items: space-around;
  align-items: center;
  .region-index {
    width: 26px;
    height: 26px;
    background-image: url(../../assets/images/dialogs/4-icon.png);
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: AlibabaPuHuiTi_2_85_Bold;
    font-size: 8px;
    color: #3998ff;
    margin-right: 5px;
  }
  .region-index1 {
    background-image: url(../../assets/images/dialogs/1-icon.png);
    background-size: 100% 100%;
    color: #ffe800;
  }
  .region-index2 {
    background-image: url(../../assets/images/dialogs/2-icon.png);
    background-size: 100% 100%;
    color: #eef7fd;
  }
  .region-index3 {
    background-image: url(../../assets/images/dialogs/3-icon.png);
    background-size: 100% 100%;
    color: #a46b52;
  }
  .region-name {
    font-family: AlibabaPuHuiTi_2_55_Regular;
    font-size: 14px;
    line-height: 18px;
    color: #ffffff;
    margin-right: 10px;
  }
  .region-content {
    width: 358px;
    font-family: AlibabaPuHuiTi_2_55_Regular;
    font-size: 12px;
    color: #ffffff;
    .region-content-text {
      height: 16px;
      margin-bottom: 4px;
      font-size: 14px;
    }
    .region-content-value {
      font-family: AlibabaPuHuiTi_2_55_Regular;
      font-size: 12px;
      color: #fad06d;
    }
  }
  .region-content-progress {
    height: 16px;
  }
}
</style>
<style lang="scss">
.region-content-progress {
  .el-progress-bar__outer {
    height: 12px !important;
    border-radius: 0;
    background-color: rgba(17, 87, 151, 0.15);
    border: solid 1px #26b8fa;
  }
  .el-progress-bar__inner {
    top: 2px;
    left: 2px;
    height: 6px;
    background-image: linear-gradient(90deg, #3998ff 0%, #08ebff 100%);
    border-radius: 0;
  }
  .el-progress__text {
    font-family: AlibabaPuHuiTi_2_65_Medium;
    font-size: 14px;
    color: #08ebff;
  }
}
</style>
